<template>
  <div class="index">
    <van-tabs v-model:active="active" :animated="true" swipe-threshold="2">
      <van-tab title="推荐" to="/home/index/recommend"> </van-tab>
      <van-tab title="即将上线" to="/home/index/soon"> </van-tab>
      <van-tab title="排行榜" to="/home/index/Ranking"></van-tab>
      <van-tab title="视频" to="/home/index/video"></van-tab>
    </van-tabs>
    <div class="user">
      <div class="search">
        <a href="javascript:">
          <img src="../../../public/img/搜索.png" alt="" @click="search" />
        </a>
      </div>
      <div class="signin" @click="showPopup">
        <a href="javascript:">
          <img src="../../../public/img/登录.png" alt="" />
        </a>
      </div>
    </div>
    <div class="nav"></div>
    <!-- <transition name="fade" mode="in-out"> -->
    <router-view></router-view>
    <!-- </transition> -->
    <div class="nav"></div>
    <!-- 左侧弹出框 -->
    <van-popup
      v-model:show="show"
      position="left"
      :style="{ height: '100%', width: '85%' }"
      ><LeftPropWindow
    /></van-popup>
  </div>
</template>

<script>
import LeftPropWindow from "@/views/home/LeftPropWindow.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    const active = ref(0);

    // 左侧弹出
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    // 搜索
    const search = () => {
      router.push("/search");
    };

    return { active, show, showPopup, search };
  },
  components: {
    LeftPropWindow,
  },
};
</script>
<style lang="less">
@import "../../assets/css/var.less";
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  // opacity: 0;
  transform: translateX(100%);
}
.index {
  .nav {
    height: 55px;
  }
  .user {
    width: 105px;
    height: 55px;
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    z-index: 100;
    background-color: #ffffff;
    justify-content: space-evenly;
    img {
      width: 30px;
      height: 30px;
    }
    div {
      .center();
    }
  }
  .van-tabs__wrap {
    // width: 75%;
    width: 300px;
    height: 55px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: -15px;
    .van-tab--active {
      font-size: 16px;
    }
    .van-tab {
      flex-shrink: 0;
      width: 92px;
    }
  }
  .van-tabs__line {
    bottom: 20px;
  }
}
</style>
